<template>
	<view class="login-bg" style="overflow-x: hidden;">
		<top-heigth back-title="登录"></top-heigth>
		
		<view class="index-box">
			<view class="index-content">
				<view class="login-title">
					<view class="font choose">
						登录
					</view>
				</view>
		
				<view v-if="tab==0">
					<view class="login-box">
						<view class="login-box-input" style="margin-bottom: 0;">
							<view class="login-box-line">
								<uv-row justify="space-between">
									<uv-col span="8">
										<uv-input class="login-box-line-input" type="phone" placeholder="请输入手机号" border="none" v-model="phone"></uv-input>
									</uv-col>
									<uv-col span="3" v-if="secDown == 60" class="login-num-but" @click="sendMobile">
										获取验证码
									</uv-col>
									<uv-col span="3" v-else class="login-num-but2" style="font-size: 28rpx; padding: 10rpx 40rpx;">
										{{secDown}}
									</uv-col>
								</uv-row>
								
							</view>
							<!-- <view class="err">占用</view> -->
						</view>
							
						<view class="login-box-input">
							<view class="login-box-line">
								<uv-input class="login-box-line-input" type="number"
									placeholder="请输入验证码"
									border="none"
									v-model="code"
									maxlength="6"
									></uv-input>
							</view>
							<!-- <view class="err">占用</view> -->
						</view>
						<view class="login-but" @click="loginInto">
							立即登录
						</view>
					</view>
				</view>
				
				<!--  微信等快捷登录  -->
				<view class="quick-box">
					<template v-if="platform != 'mp-h5'">
						<view class="quick-title">快捷登录</view>
						<view class="quick">
							<uv-row customStyle="margin-bottom: 10px">
								<uv-col span="6" v-if="platform == 'ios'||'Android'||'android'" @click="loginWx">
									<image src="/static/image/weixin.png" width="60rpx" height="60rpx" mode=""></image>
									<view class="quick-font"></view>
								</uv-col>
								<uv-col span="6" v-if="platform == 'ios'" @click="loginApple">
									<image src="/static/image/apple.png" mode=""></image>
									<view class="quick-font"></view>
								</uv-col>
							</uv-row>
						</view>
					</template>
					
					<!-- 协议 -->
					<view class="read-box">
						<view @click="(readNum===0)?readChoose(1):readChoose(0)" :class="readNum===0?'read':'read read-choose'"></view>
							<view style="display: inline-block;">已阅读并同意
							<span @click="goText">《服务协议》、
							</span><span @click="goText2">《购买协议》</span>和
							<span @click="goText3">《隐私政策》</span>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				tab:0,
				readNum:0,
				phone:'',
				code:'',
				name:'',
				password:'',
				secDown: 60,
				platform: null,
				channel: 0,
				openid: "",
				deviceType:'',
				systemInfo:null
			}
		},
		components: { TopHeigth },
		onLoad() {
			/*#ifdef H5*/
			// var url = window.location.search;
			// var theRequest = new Object();
			// if (url.indexOf("?") != -1) {
			// var str = url.substr(1);
			// var strs = str.split("&");
			// for (var i = 0; i < strs.length; i++) {
			// 	theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
			// 	}
			// }
			// if(theRequest.channel){
			// 	this.channel = theRequest.channel
			// }

			// if(theRequest.code){
			// 	uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/wxcodegetinfo',{code: theRequest.code, channelId: this.channel}).then((res) => {
			// 		if(res.code != 200){
			// 			window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0847264737623e70&redirect_uri=http%3A%2F%2Fapp.dongfangdaojia.com%2F%3Fchannel%3D"+this.channel+"%23%2Fpages%2Flogin%2Findex&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
			// 			return;
			// 		}
			// 		this.openid = res.data
			// 	})
			// }else{
			// 	window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0847264737623e70&redirect_uri=http%3A%2F%2Fapp.dongfangdaojia.com%2F%3Fchannel%3D"+this.channel+"%23%2Fpages%2Flogin%2Findex&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
			// 	return;
			// }
			
			/*#endif*/
			// 异步获取手机信息
			    uni.getSystemInfo({
			      success: (info) => {
			        this.systemInfo = info;
					console.error('获取系统信息成功:', info);
			      },
			      fail: (error) => {
			        console.error('获取系统信息失败:', error);
			      }
			    });
			
		},
		mounted() {
			const res = uni.getSystemInfoSync()
			/*#ifdef H5*/
			this.platform = 'mp-h5'
			/*#endif*/
			
			/*#ifdef APP-PLUS*/
			this.platform = res.platform
			/*#endif*/
			
		},
		methods: {
			loginWx(){
				if(!this.readNum){
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'none'
					});
				}
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						console.log("provider", res.provider);
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {
									console.log('获取登录信息', loginRes);
									
									//------- 以下根据实际需求处理 以下仅参考
									
									// #ifdef APP-PLUS
									uni.getUserInfo({
										success: (resInfo) => {
											// 系统去注册
											uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/loginWx',{
												wxCode: resInfo.userInfo.openId,
												userCover: resInfo.userInfo.avatarUrl,
												userName: resInfo.userInfo.nickName,
												userSex: resInfo.userInfo.gender*1+1,
												deviceType:this.systemInfo.brand
											}).then((res) => {
												if(res.code != 200){
													return uni.showToast({
														title: res.message,
														icon: 'none'
													});
												}
												uni.setStorageSync('token', res.data);
												// 验证是否需要绑定手机操作
												this.toBindMobile()
											})
											
										},
										fail: (error) => {
											console.log(error)
										}
									})
									// #endif
									
									// #ifdef MP-WEIXIN
									// this.queryUserInfo(loginRes.code)
									// #endif
									
								},
								complete: (error) => {
									console.log("error", error)
								}
							})
						}
					}
				})
			},
			loginApple(){
				if(!this.readNum){
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'none'
					});
				}
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
								var openId = userInfoRes.userInfo.openId
								// 系统去注册
								uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/loginApple',{appleCode: openId,deviceType:this.systemInfo.brand}).then((res) => {
									if(res.code != 200){
										return uni.showToast({
											title: res.message,
											icon: 'none'
										});
									}
									uni.setStorageSync('token', res.data);
									// 验证是否需要绑定手机操作
									this.toBindMobile()
								})
							},
							fail: (err) => {
								uni.hideLoading()
								console.log(err)
							}
						})
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					},	
				})
			},
			toBindMobile(isH5 = false){
				checkLogin((userInfo) => {
					if(userInfo && !userInfo.userMobile){
						// 跳转绑定页面
						uni.navigateTo({
							url: "/pages/mine/phone?sign=2"
						})
					}else{
						if(isH5){
							uni.switchTab({
								url: "/pages/index/index"
							})
						}else{
							uni.navigateBack()
						}
					}
				}, true)
			},
			toResetPwd(){
				uni.navigateTo({
					url: "/pages/login/findePassword"
				})
			},
			loginInto(){
				if(!this.phone || !this.code){
					return uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					});
				}
				if(!this.readNum){
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'none'
					});
				}
				console.log("error", this.systemInfo.model)
				uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/loginMobile',{userMobile: this.phone, code: this.code, channelId: this.channel, wxCode: this.openid,deviceType:this.systemInfo.brand}).then((res) => {
					if(res.code != 200){
						return uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
					uni.setStorageSync('token', res.data);
					if(this.platform == 'mp-h5'){
						uni.switchTab({
							url: "/pages/index/index"
						})
					}else{
						uni.navigateBack()
					}
				})
			},
			sendMobile(){
				if(!this.phone || this.phone.length != 11){
					return uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
				}
				uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/sendMobile',{userMobile: this.phone}).then((res) => {
					
					let timer = setInterval(() => {
						this.secDown --;
						if(this.secDown == 0){
							clearInterval(timer);
							this.secDown = 60
						}
					}, 1000)
					
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
				})
			},
			goText: function(){
				uni.navigateTo({
					url: '/pages/login/text'
				});
			},
			goText2: function(){
				uni.navigateTo({
					url: '/pages/login/text2'
				});
			},
			goText3: function(){
				uni.navigateTo({
					url: '/pages/login/text3'
				});
			},
			readChoose(num){
				this.readNum = num
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	
	
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
	.desc {
		/* text-indent: 40rpx; */
	}
	.flex-pc {
		display: flex;
		justify-content: center;
	}
	
	
	
	
	.index-box{
			height: 90vh;
			/* background: url("/static/image/login-back.png") no-repeat; */
			background-size: 100% auto;
	}
	.index-content{
		padding:120rpx 60rpx 0;
	}
	.login-title{
		width: 100%;
		margin-bottom: 100rpx;
	}
	.login-title .font{
		color:#999;
		width: 170rpx;
		padding-bottom: 10px;
		color:#333333;
		font-size: 54rpx;
		font-weight: bold;
	}
	.login-title:first-child .font{
		margin-left:0;
	}
	.login-title .font span{
		padding-bottom: 16rpx;
	}
	.login-title .font.choose span{
		// background: url("/static/image/index/choose.png") center bottom no-repeat;
		background-size: 40rpx auto;
	}
	
	.login-box-title{
		color: #323233;
		font-weight: 500;
		font-size:24rpx;
	}
	.login-box-input{
		margin-bottom: 40rpx;
	}
	.login-box-input .err{
		color: red;
		font-size: 24rpx;
		font-weight: bold;
	}
	.login-box-line{
		padding: 40rpx 0 20rpx 0;
		border-bottom: 1px solid #DDDDDD;
		margin-bottom: 10rpx;
	}
	.login-box-line-input{
		font-size: 32rpx;
		height: 40rpx;
		padding: 0 !important;
		
		/*border:none;
		-webkit-appearance:none;去除阴影边框
		outline: none;
		-webkit-tap-highlight-color:rgba(0,0,0,0);点击高亮的颜色*/
	}
	
	.login-num-but{
		width: 100%;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 64rpx;
		color:#278FFF;
		text-align: center!important;
		background: rgba(39,143,255,0.1);
		border-radius: 8rpx;
		cursor: pointer;
	}
	.login-num-but2{
		color:#999;
		background: #EFF5F5;
		text-align: center !important;
	}
	.login-but{
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 96rpx;
		color:#fff;
		text-align: center;
		background: #27A0FF;
		border-radius:48rpx;
		margin-top: 50rpx;
	}
	.login-chack{
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 96rpx;
		color:#fff;
		text-align: center;
		background: #18D3FE;
		border-radius:48rpx;
		margin-top: 100rpx;
	}
	.read-box{
		@include flex;
		width: 100%;
		margin-top: 40rpx;
		font-size: 24rpx;
	}
	.read-box span{
		color: #18D3FE;
		cursor: pointer;
	}
	.read{
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background:url("/static/image/pay-box1.png") no-repeat center;
		background-size: 28rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}
	.read-choose{
		width: 28rpx;
		height: 28rpx;
		background:url("/static/image/pay-box2.png") no-repeat center;
		background-size: 28rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}
	/* 快捷登录 */
	.quick-box{
		position: fixed;
		bottom: 160rpx;
		width:calc(100% - 120rpx);
		
	}
	.quick{
		padding: 0 100rpx;
	}
	.quick image{
		width: 88rpx;
		height: 88rpx;
		margin: 0 auto;
	}
	.quick-font{
		margin-top: 20rpx;
		/* width: 88rpx; */
		text-align: center!important;
		font-size: 24rpx;
		color: #333;
	}
	.quick-title{
		color: #999;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}
	.forget{
		text-align: right;
		color: #18D3FE;
		font-size: 24rpx;
		cursor: pointer;
	}
	
	.login-bg{
		background: url("../../static/image/back3.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
	}
</style>
